<template>
  <div :style="{ animation }" class="core-spine-text">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
interface Props {
  animation?: string
}

withDefaults(defineProps<Props>(), {
  animation: '2s linear 0s infinite normal none running spine-scroll'
})

defineOptions({
  name: 'CoreSpineText'
})
</script>

<style scoped lang="scss">
.core-spine-text {
  color: transparent;
  background:
    radial-gradient(
        circle at center,
        rgb(255 255 255 / 80%),
        rgb(255 0 0 / 0%)
      ) -200%
      50% / 200% 100% no-repeat,
    #000;
  background-clip: text;
}

.dark .core-spine-text {
  background:
    radial-gradient(circle at center, rgb(24 24 26 / 80%), transparent) -200%
      50% / 200% 100% no-repeat,
    #f4f4f4;
  background-clip: text;
}
</style>
